<template>
  <div>
    <div>
      <!-- 页头 -->
      <div class="back">
        <i class="el-icon-back" @click="$router.go(-1)"></i>
        <span style="padding: 10px; color: rgba(0, 0, 0, 0.15)">|</span>
        <span style="font-size: 20px; font-weight: 500; color: #2f343e"
          >新增预警规则</span
        >
      </div>
      <!-- 主题 -->
      <div class="content-box">
        <el-form
          ref="form"
          :model="formData"
          :rules="rules"
          label-width="120px"
          label-position="left"
        >
          <!-- 预警规则名称 -->
          <el-form-item label="预警规则名称:" prop="name">
            <el-input
              v-model="formData.name"
              placeholder=""
              style="width: 340px; margin-left: 35px"
            />
          </el-form-item>
          <!-- 预警单位： -->
          <el-form-item label="预警单位：" prop="type">
            <el-select
              v-model="formData.type"
              placeholder="全部单位"
              style="width: 340px; margin-left: 35px"
            >
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <!-- 规则配置 -->
          <el-form-item label="规则配置:" prop="name">
            <HkTable
              ref="table"
              :loading="loading"
              :table-data="arrList"
              :table-columns="tableLabelList"
              :is-need-index="true"
              style="width: 900px; margin-left: 35px"
            >
              <!-- 预警指标 -->
              <template #name="scope">
                {{ scope.row.name }}
                <div>
                  <el-select
                    v-model="formData.type"
                    placeholder="运行管理风险评估值"
                    style="width: 190px; margin-left: 27px"
                  >
                  </el-select>
                </div>
              </template>
              <!-- 判定条件 -->
              <template #datasourceName="scope">
                {{ scope.row.datasourceName }}
                <div>
                  <el-select
                    v-model="formData.type"
                    placeholder="<"
                    style="width: 190px; margin-left: 27px"
                  >
                  </el-select>
                </div>
              </template>
              <!-- 阈值 -->
              <template #outputDatasourceName="scope">
                {{ scope.row.name }}
                <div>
                  <el-select
                    v-model="formData.type"
                    placeholder="请输入"
                    style="width: 190px; margin-left: 27px; margin-right: 27px"
                  >
                  </el-select>
                  <i
                    class="el-icon-circle-plus"
                    :style="{ color: '#4B6EEF' }"
                    style="font-size: 16px"
                  ></i>
                  <span
                    style="margin-left: 4px; font-size: 14px; color: #4b6eef"
                    >增加</span
                  >
                </div>
              </template>
            </HkTable>
          </el-form-item>
          <!-- 风险预警级别 -->
          <el-form-item
            label="风险预警级别："
            prop="cronType"
            show-error="false"
          >
            <el-select
              v-model="formData.type"
              placeholder="请选择"
              style="width: 340px; margin-left: 35px"
            >
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <!-- 预警生成周期 -->
          <el-form-item label="预警生成周期:" prop="cronType">
            <el-radio-group
              v-model="formData.cronType"
              style="width: 340px; margin-left: 35px"
              @change="handleChange($event, 'cronType')"
            >
              <el-radio label="1">周期性</el-radio>
              <el-radio label="2">定期</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- 时间表 -->
          <el-form-item label="" prop="PerformConfiguration">
            <div class="son-panel" style="width: 340px; margin-left: 35px">
              <span style="margin: 18px 10px 0px 0px; font-size: 14px"
                >每
              </span>
              <el-form-item prop="cycleTime">
                <el-input-number
                  v-model="formData.cycleTime"
                  style="margin: 0 10px 0 0; width: 88px"
                  controls-position="right"
                  :min="15"
                  :max="60"
                  size="small"
                />
              </el-form-item>
              <el-form-item prop="cycleNode">
                <el-select
                  v-model="formData.cycleNode"
                  placeholder="分钟"
                  style="width: 88px; height: 28px"
                >
                  <el-option
                    v-for="item in cycleNodeOption"
                    :key="item.itemVale"
                    :label="item.itemLabel"
                    :value="item.itemVale"
                  />
                </el-select>
              </el-form-item>

              <el-form-item>
                <div style="margin: 16px 10px; width: 150px; font-size: 14px">
                  执行一次
                </div>
              </el-form-item>
            </div>
          </el-form-item>
          <!-- 预警规则说明 -->
          <el-form-item label="预警规则说明:">
            <el-input
              type="textarea"
              :rows="6"
              :cols="2"
              style="width: 900px; margin-left: 35px; height: 150px"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$router.go(-1)">取 消</el-button>
      <el-button type="primary" @click="$router.go(-1)">保 存</el-button>
    </div>
  </div>
</template>
<script>
import HkTable from "@/components/HKTable";

export default {
  components: { HkTable },
  data() {
    return {
      cycleNodeOption: [],
      formData: {
        cronType: "1",
        type: "",
        name: "",
        cycleTime: 0,
        timeNode: "",
        times: "",
        cycleNode: "",
      },
      // 表单参数
      rules: {
        name: [
          { required: true, message: "作业名称不能为空", trigger: "blur" },
        ],
        type: [{ required: true, message: "请选择作业类型", trigger: "blur" }],
        cycleTime: [{ required: true, message: "请选择", trigger: "blur" }],
        timeNode: [{ required: true, message: "请选择", trigger: "blur" }],
        day: [{ required: true, message: "请选择", trigger: "blur" }],
        times: [{ required: true, message: "请选择", trigger: "blur" }],
      },
      //   表头名称
      tableLabelList: [
        { label: "预警指标", param: "name", type: "slot", width: "240px" },
        {
          label: "判定条件",
          param: "datasourceName",
          type: "slot",
          width: "240px",
        },
        { label: "阈值", param: "outputDatasourceName", type: "slot" },
      ],
      arrList: [
        {
          name: "",
          datasourceName: "",
          outputDatasourceName: "",
        },
      ],
    };
  },
};
</script>

<style scoped lang="scss">
.back {
  margin-bottom: 20px;
}
.content-box {
  background-color: #ffffff;
  //   height: 1000px;
  padding-left: 100px;
  padding-top: 50px;
  padding-bottom: 50px;
}
.son-panel {
  display: flex !important;
}
.dialog-footer {
  margin-top: 20px;
  // margin-bottom: 20px;
  display: flex;
  justify-content: flex-end;
  background-color: #ffffff;
  padding: 14px 20px;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}
::v-deep {
  .el-form-item--medium .el-form-item__content {
    // line-height: 32px;
    margin-bottom: 20px;
  }
  .content-box[data-v-1a8a03f8] {
    padding-bottom: 11px;
  }
  .el-input--medium .el-input__inner {
    height: 32px;
    line-height: 32px;
  }
  .el-form-item__content {
    line-height: 0px;
  }
  .el-pagination {
    display: NONE;
  }
  .el-form-item--medium .el-form-item__label {
    margin-top: -9px;
  }
  .el-table th.el-table__cell > .cell {
    padding-left: 37px;
  }
  .el-textarea__inner {
    resize: none;
  }
}
</style>
